<template>
  <div class="visitresult">
    <span
      ><h3><span style="color: blue; bold">|</span>拜访统计</h3></span
    >
    <div class="routeheader">
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <i class="el-icon-search">筛选查询</i>
        </el-col>
        <el-col :span="3"
          ><el-button type="primary" @click="selectResult"
            >查询结果</el-button
          ></el-col
        >
      </el-row>
    </div>
    <div class="form">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="起止时间：">
          <el-date-picker
            v-model="formInline.time"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="拜访人员：">
          <!-- -->
          <!--
          <el-select v-model="value" clearable placeholder="拜访人员">
            <el-option
              v-for="item in visitor"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
           -->
          <el-input
            v-model="formInline.visitor"
            placeholder="拜访人员"
            @input="handleInputChange"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户名称：">
          <el-input
            v-model="formInline.customername"
            placeholder="客户名称"
            @input="handleInputChange"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="datelist">
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <i class="el-icon-s-grid">数据列表</i>
        </el-col>
        <el-col :span="10">
          <el-row type="flex">
            <el-col :span="10">
              <el-button type="primary">全部导出</el-button>
            </el-col>
            <el-col :span="10">
              <el-button type="primary">导出选中</el-button>
            </el-col>
            <el-col :span="10">
              <el-select
                v-model="value"
                clearable
                placeholder="排序方式"
                @click="sortWays"
              >
                <el-option
                  v-for="item in sortwayslist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="8"></el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div class="routemain">
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%; line-height: 0px"
      >
        <!--  
        客户名称
        拜访人员
        拜访行为
        签到距离
        进店时间
        离店时间
      -->
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column prop="customername" label="客户名称" width="120">
        </el-table-column>
        <el-table-column prop="visitor" label="拜访人员" width="120">
        </el-table-column>
        <el-table-column prop="visitaction" label="拜访行为" width="120">
        </el-table-column>
        <el-table-column prop="signin_distance" label="签到距离" width="60">
        </el-table-column>
        <el-table-column prop="entry_time" label="进店时间"> </el-table-column>
        <el-table-column prop="departure_time" label="离店时间">
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[5, 10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      //搜索框
      formInline: {},
      //表格信息// 当前显示的表格数据
      tableData: [],
      tableList: [], //暂时存储列表
      //分页设置
      total: 0, // 总条数
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页条数
      //拜访人员选择
      visitor: [
        // {
        //   value: "",
        //   label: "",
        // },
      ],
      value: "",
      // 排序方式list
      sortwayslist: [
        // {
        //   value: "",
        //   label: "",
        // },
      ],
      value: "", //下拉选项初始值
    };
  },
  methods: {
    //分页
    getList() {
      axios
        .get(
          "https://www.fastmock.site/mock/209040d286c0365d882a2dfa80a278fc/manager/visit"
        )
        .then((res) => {
          this.tableList = res.data;
          this.tableData = []; //表单初始化
          //第一步：当前页的第一条数据在总数据中的位置
          let strlength = (this.currentPage - 1) * this.pageSize + 1;
          //第二步：当前页的最后一条数据在总数据中的位置
          let endlength = this.currentPage * this.pageSize;
          //第三步：此判断很重要，执行时机：当分页的页数在最后一页时，进行重新筛选获取数据时
          //获取本次表格最后一页第一条数据所在的位置的长度
          let resStrLength = 0;
          if (this.tableList.length % this.pageSize == 0) {
            resStrLength =
              (parseInt(this.tableList.length / this.pageSize) - 1) *
                this.pageSize +
              1;
          } else {
            resStrLength =
              parseInt(this.tableList.length / this.pageSize) * this.pageSize +
              1;
          }
          //如果上一次表格的最后一页第一条数据所在的位置的长度 大于 本次表格最后一页第一条数据所在的位置的长度，则将本次表格的最后一页第一条数据所在的位置的长度 为最后长度
          if (strlength > resStrLength) {
            strlength = resStrLength;
          }
          //第四步：此判断很重要，当分页的页数切换至最后一页，如果最后一页获取到的数据长度不足最后一页设置的长度，则将设置的长度 以 获取到的数据长度 为最后长度
          if (endlength > this.tableList.length) {
            endlength = this.tableList.length;
          }
          //第五步：循环获取当前页数的数据，放入展示的数组中
          for (let i = strlength - 1; i < endlength; i++) {
            this.tableData.push(this.tableList[i]);
            console.log("当前数据", this.tableList[i]);
          }
          //数据的总条数
          this.total = this.tableList.length;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleSizeChange(pagesize) {
      this.pagesize = pagesize;
      this.getList();
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getList();
      console.log(this.currentPage); //点击第几页
    },
    //查询结果
    async selectResult() {
      try {
        const res = await axios.get(
          "https://www.fastmock.site/mock/209040d286c0365d882a2dfa80a278fc/manager/visit"
        );
        this.tableList = res.data;
        this.tableData = this.tableList.filter((item) => {
          return item.customername.includes(this.formInline.customername) && item.visitor.includes(this.formInline.visitor);
        });
      } catch (error) {
        console.error(error);
      }
    },
    //input框数据
    handleInputChange() {
      if (this.formInline.customername === "" && this.formInline.visitor === "") {
        this.getList();
      } else {
        this.tableData = this.tableList.filter((item) => {
          return item.customername.includes(this.formInline.customername) && item.visitor.includes(this.formInline.visitor);
        });
      }
    },
    //排序方式
    sortWays() {},
  },
  //加载数据
  // mounted() {
  //   this.getList();
  // },
  computed: {
    //查询结果
    distableData() {
      if (this.formInline.customername === "" && this.formInline.visitor === "") {
        return this.tableList;
      } else {
        return this.tableData;
      }
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
.routeheader,
.datelist {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  height: auto;
}

.routemain {
  line-height: 160px;
  color: #333;
  padding-top: 20px;
  overflow-y: scroll;
}

body > .el-container {
  margin-bottom: 40px;
}

/* 自定义 style */
.route {
  overflow: scroll;
}
.form {
  margin: auto;
  padding: 5px 20px;
  border: 1px solid #3333;
}

.datelist {
  margin-top: 20px;
}
.block {
  text-align: center;
}
</style>>
